import React, { Component, Fragment } from "react";
// antd
import { Table, Button, Col, Pagination, Form, Input, Tag, Select, Modal } from "antd";
import Action from "@c/buttonAction/Index";

// http
import http from '../../utils/request';

const { Option } = Select;


class CloudAlarmThreshold extends Component {
    constructor(props){
        super(props);
        this.state = {
            // 表格分页
            total: '',
            page: 1,
            page_number: 10,
            dataSource: [],
            columns: [
                {title: "云平台", dataIndex: "platform", key: "platform", width: "100px",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.platform}</Tag>                                
                            </div>
                        )
                    }
                },
                {title: "产品", dataIndex: "product", key: "product", width: "200px",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.product}</Tag>                                
                            </div>
                        )
                    }
                },
                {title: "事件名称", dataIndex: "name", key: "name", width: "350px",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="blue">{rowData.name}</Tag>                                
                            </div>
                        )
                    }
                },
                {title: "事件描述", dataIndex: "name_desc", key: "name_desc"},
                {title: "事件状态", dataIndex: "status", key: "status"},
                {title: "事件动作", dataIndex: "event_type", key: "event_type"},
                {title: "事件级别", dataIndex: "level", key: "level", width: "100px"},

                {title: "操作", dataIndex: "operation", key: "operation", 
                    render: (text, rowData) => {
                        return (
                            <div className="inline-button">
                                <Action>
                                    <Action.Button onClick={() => this.onDeleteCloudAlarmCallbackMaintainBtn(rowData)}>删除</Action.Button>
                                </Action>
                            </div>

                        )
                    }           
                }

            ],
            loading: false,
            visible_delete: false,
            search_name: null,
            search_platform: null,
            search_option_platform: [],
        }
    }

    componentDidMount() {
        this.loadData()
        this.loadDataPlatform()
    }

    loadDataPlatform = () => {
        const requestData = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/cloud/platform', {params: requestData}).then(response=>{
            const search_option_platform = []
            const resp_data = response.data.data.items
            for (let i = 0; i < resp_data.length; i++) {
                search_option_platform.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
            }
            this.setState({
                search_option_platform: search_option_platform
            })
        })
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'name__contains': this.state.search_name,
            'platform': this.state.search_platform,
        }

        // 获取分组列表
        http.get('/cloud/cms/systemEventMetaList', {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    /** 切换每页数量 */
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
    } 

    /** 云平台搜索 */
    onFinishSearch = (data) => {
        this.setState({
            page: 1,
            search_name: data.name ? data.name: null,
            search_platform: data.platform ? data.platform : null,
        })
        this.loadData()
    }


    // 搜索切换业务线
    onChangeBusiness = (value) => {
        if (value) {
            this.setState({
                search_business_name: value
            })
        } else {
            this.setState({
                search_business_name: null,
            })
        }
    }

    // 搜索切换云平台
    onChangePlatform = (value) => {
        if (value) {
            this.setState({
                search_instance_platform: value
            })
        }
    }

    render(){
        const { loading, dataSource, columns, page, total, search_option_platform, visible_delete } = this.state
        const rowSelection = {
            onChange: this.onCheckbox
        }
        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}
        return (
            <Fragment>
                <Form layout="inline" onFinish={this.onFinishSearch}>
                    <Form.Item label="事件名称" name="name">
                        <Input placeholder="请输入事件名称"  />
                    </Form.Item>

                    <Form.Item label="云平台" name="platform">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="请选择区域"
                            optionFilterProp="children"
                            onChange={this.onChangePlatform}
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {search_option_platform}
                        </Select>
                    </Form.Item>

                    <Form.Item shouldUpdate={true}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>
                
                <div style={myStyle1}><Button type="primary" onClick={this.onAddCloudPlatformBtn}></Button></div>
                <Table
                    pagination={false} 
                    rowSelection={rowSelection} 
                    rowKey="id" 
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{ y: 500, x: '70vw' }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>

                <Modal
                    title="删除维护记录"
                    visible={visible_delete}
                    onOk={this.handleCloudAlarmCallbackMaintainDelete}
                    onCancel={() => {this.setState({visible_delete: false, cloud_alarm_callback_maintain_id: ''})}}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>确定删除<span style={{color: 'red'}}>维护记录</span>? 删除后将无法恢复</p>
                </Modal>

            </Fragment>
        )
    }
}
export default CloudAlarmThreshold;